<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
	<meta charset="utf-8">
	<title>Django练习</title>
	<link type="text/css" rel="stylesheet" href="{% static 'css/style.css' %}">
	<style type="text/css">
		@import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");
		#headbar { position: relative; top: 5px; left: 350px; }
		#headbar a { vertical-align: bottom; text-decoration: none; }
		.count { display: inline-block; width: 25px; height: 25px; opacity: 0.7; background-color: black; position: relative; left: 60px; top: -40px; }
		.pub { display: inline-block; margin-left: 35px; background-color: rgb(180,0,5); height: 36px; }
		.pub a { display: inline-block; text-decoration: none; width: 125px; height: 36px; text-align: center; font-size: 16px; line-height: 36px; }
		.pub a:visited, .pub a:link { color: white; }
		select { display: inline-block; width: 80px; height: 20px; }
		.house-tag { border: 1px solid red; 	}
	</style>
</head>
<body>
{% verbatim %}
<div class="main wrap">
	<div id = "app">
	<table class="house-list">		
		<tr v-for="college in colleges">
			<td class="house-thumb">
				<div>
					<img :src=college.logo width="160" height="120" alt="">
				
				</div>
			</td>
			<td>
				<dl>
					<dt>
						<a href="">{{college.name}}</a>
					</dt>
					<dd>
						{{college.info}} <br>
					</dd>
				</dl>
			</td>		
		</tr>		
	</table>		
	</div>
	<div id="app1" class="block">
	<!-- <span class="demonstration">调整每页显示条数</span> -->
		<el-pagination
			background
			layout="sizes, total, prev, pager, next"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			:page-sizes="[5, 10, 20, 30]"
			:page-size="size"			
			:total="count">
		</el-pagination>
	</div>
</div>
{% endverbatim %}
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>  
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script>
	var size = 5
	var data = []
	var page = 1
	var count = 10

	function records(){
		var url ='/api/colleges/?page='+page+'&page_size='+size
		$.getJSON(url,(json)=>{			
			count = json.count    
			app1.count = count
            app.colleges = json.results
		})
	}
	var Main1 = {
		methods: {
		handleSizeChange(val) {
			size = val
			page = 1
			records()           
		},
		handleCurrentChange(val) {
			page = val
			records()
			
		}
		},
		data() {
			return {
				currentPage: page,
				size: size, // 当前页
				count: count,
			};
		}
	}
	var Ctor1 = Vue.extend(Main1)
	app1 = new Ctor1().$mount('#app1') 
	
	const app = new Vue({
		el: '#app',
		data: {
			colleges: [],
			// count: 1,
			previous: '',
			next: '',
		},
		// created(){
		// 	fetch('/api/houseinfos')
		// 	.then(resp => resp.json())
		// 	.then(json => {
		// 		this.houses = json.results
		// 	})
		// }
	})
	// function records(){
	// 	var url = '/api/houseinfos/?page='+page+'&size='+size
	// 		$.getJSON(url,(json)=>{
	// 		app.houses = json.results
	// 		count = json.count    
	// 		app1.count = count
	// 	})
	// }
	records()
</script>
	</body>
</html>